<template>
    <div class="detail-container">
        <head-bar height="80" middleText="订单详情" :leftClick="popupOverlayOrderClick"></head-bar>


        <wxc-tab-page ref="wxc-tab-page"
                      :tab-titles="tabTitles"
                      :tab-styles="tabStyles"
                      title-type="icon"
                      pan-dist="20"
                      duration="150"
                      :tab-page-height="tabPageHeight"
                      @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
            <list v-for="(v,index) in tabList"
                  :key="index"
                  class="item-container"
                  :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">


                <refresh v-if="index == 0" class="refresh" @refresh="loadFollowData('refresh')"
                         :display="followRefreshing ? 'show' : 'hide'">
                    <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                       class="indicator"></loading-indicator>
                </refresh>

                <refresh v-if="index == 3" class="refresh" @refresh="loadOrder('refresh',{page:1})"
                         :display="orderRefreshing ? 'show' : 'hide'">
                    <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                       class="indicator"></loading-indicator>
                </refresh>

                <cell class="border-cell"></cell>
                <cell v-if="index == 0" v-for="(item,key) in v"
                      class="cell"
                      :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan" @wxcPanItemClicked="wxcPanItemClicked(item)">
                        <div class="follow-area">
                            <div class="user-info-area">
                                <image class="user-photo" src="root:img/my_photo.png"></image>
                                <div class="user-name-time">
                                    <text class="user-name text-notmal">{{item.followUserName}}</text>
                                    <text class="text-minor follow-time">{{formatTime(item.followTime)}}</text>
                                </div>
                            </div>
                            <div class="follow-content-area">
                                <div class="follow-content">
                                    <text class="text-success">【{{getFollowTypeName(item.followType)}}】</text>
                                    <text class="text-notmal">{{item.followContent}}</text>
                                </div>

                                <waterfall v-if="item.contentType == 1100" column-width="200"
                                           :style="autoFollowHeightStyle(item.contentFiles)" column-count="3"
                                           class="follow-content-img">
                                    <cell v-for="(fimg,findex) in imgList(item.contentFiles)">
                                        <image class="follow-img"
                                               @click="openWxcLightboxOverlayClicked(item.contentFiles,findex)"
                                               placeholder="root:img/default_yx.png"
                                               :src="fimg"></image>
                                    </cell>
                                </waterfall>
                            </div>
                        </div>
                        <div class="follow-footer"></div>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 1" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan">
                        <user-doc :user-id="userId" :user-type="userType" :is-show="_isInfoShowBtn"></user-doc>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 2" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan">
                        <contacts-list :user-id="userId" :user-type="userType" :is-show="_iscontactShowBtn"></contacts-list>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 3" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan" @wxcPanItemClicked="popupOppenOrderClick(item.orderId)">
                        <div class="order-panel">
                            <div class="order-header">
                                <text class="text-gray order-no" style="color: #01A65A;">{{item.orderNo}}</text>
                                <text class="text-gray order-stat">{{item.orderStatusName}}</text>
                            </div>
                            <div class="order-content">
                                <div class="order-cell">
                                    <text class="text-gray order-label">{{userType == 'buyer' ? '供应商：':'采购商：'}}</text>
                                    <text class="text-gray order-input">{{userType == 'buyer' ? item.supplierName:item.buyerName}}</text>
                                </div>
                                <div class="order-cell">
                                    <text class="text-gray order-label">下单员：</text>
                                    <text class="text-gray order-input">{{item.orderUserName}}</text>
                                </div>
                                <div class="order-cell">
                                    <text class="text-gray order-label">订单金额：</text>
                                    <text class="text-gray order-input" style="color: red;">￥{{item.orderAmount}}</text>
                                </div>
                                <div class="order-cell">
                                    <text class="text-gray order-label">下单时间：</text>
                                    <text class="text-gray order-input">{{item.orderTime}}</text>
                                </div>
                                <div class="order-cell">
                                    <text class="text-gray order-label">订单类型：</text>
                                    <text class="text-gray order-input"></text>
                                </div>
                            </div>
                        </div>
                        <div class="follow-footer"></div>
                    </wxc-pan-item>
                </cell>

                <loading v-if="index == 0" class="loading" @loading="loadFollowData('loadding',followPage+1)" :display="followItemLoadding ? 'show' : 'hide'">
                    <loading-indicator class="loading-indicator"></loading-indicator>
                </loading>

                <loading v-if="index == 3" class="loading" @loading="loadOrder('loadding',{page:orderPage+1})" :display="orderLoadinging ? 'show' : 'hide'">
                    <loading-indicator class="loading-indicator"></loading-indicator>
                </loading>

            </list>
        </wxc-tab-page>
    </div>
</template>


<!--全局通用样式-->
<style>

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-gray {
        font-size: 30px;
        color: #878787;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }


</style>

<!--订单详情-->
<style>
    .detail-container{
        flex-direction: column;
    }

    .o-cell{
        flex-direction: row;
        padding-left: 15px;
        padding-right: 15px;
        height: 80px;
        align-items: center;
    }


    .o-cell-h{
        height: 70px;
    }

    .o-cell-h-min{
        height: 40px;
    }

    .o-fsize-25{
        font-size:25px;
    }

    .o-text-min{
        font-size:25px;
        color: #6c6c6c;
    }

    .o-title{
        text-align: left;
        width:150px;
    }

    .o-bold{
        color: #555555;
        font-weight: 800;
    }

    .o-red{
        color: #ff565e;
    }

    .o-line{
        width:750px;
        background-color: #e2e2e2;
        height:10px;
    }

    .o-cell-input{
        text-align: left;
        width:570px;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 2px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 2px;
    }

    .o-cell-stat{
        text-align: right;
        width:570px;
    }

    .o-cell-title{
        text-align: right;
        width:150px;
    }

    .o-cell-big-title{
        text-align: right;
        width:200px;
    }

    .o-cell-big-input{
        text-align: right;
        width:520px;
    }


</style>
<script>
    import {Utils} from 'weex-ui'
    import headBar from '../components/headBar.vue'
    import cellSelect from '../components/cellSelect.vue'
    import cellDate from '../components/cellDate.vue'
    import nw from '../network/nw.js'
    import cellInput from '../components/cellInput.vue'
    const nav = weex.requireModule('navigator')
    var param = nav.param()

    export default {
        components: {headBar,cellInput,cellSelect,cellDate},
        data:()=>({
            searchForm:{},
            orderScrollerHeight:1344,
            orderTypes:[
                {name:'完整订单',value:1000},
                {name:'专供订单',value:1100},
                {name:'线下订单',value:1200},
            ],
            orderStats:[
                {name:'待接单',value:1200},
                {name:'待确认',value:1300},
                {name:'待付款',value:1400},
                {name:'待发货',value:1500},
                {name:'待收货',value:1600},
                {name:'已完成',value:1700},
                {name:'已作废',value:1800},
            ]
        }),
        methods:{
            //返回上个页面
            returnPage() {
                nav.back()
            },

            //订单类型
            getOrderType(data){
//                this.searchForm.orderStatus = data[0]
            },

            //订单状态
            getOrderStat(){
                this.searchForm.orderStatus = data[0]
            },

            //更新时间开始
            getUpdateDateStartVal(data){
                this.searchForm.orderUpdateTimeStart = data
            },

            //更新时间结束
            getUpdateDateEndVal(){
                this.searchForm.orderUpdateTimeEnd = data
            },

            //下单开始时间
            getOrderTimeStartVal(){
                this.searchForm.orderTimeStart = data
            },
            //下单结束时间
            getOrderTimeEndVal(){
                this.searchForm.orderTimeEnd = data
            },
            //搜索订单
            searchForm(){

            }
        },
        created(){
            this.orderScrollerHeight = Utils.env.getScreenHeight() - 130
        }
    }

</script>